<template>
  <div class="product-cost p-[16px] bg-[var(--base-color)]" style="height: calc(100% - 8px)">
    <div class="flex mb-2">
      <el-checkbox v-model="tag" true-value="v2" false-value="v1" class="ml-auto mr-[16px]">财务接口V2</el-checkbox>
      <el-button @click="query">刷新</el-button>
    </div>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item v-for="(item, index) in dataList" :key="index" :name="index">
        <template #title>
          <div class="text-[14px] text-[#3a4259] leading-[20px]">
            <span class="mr-[40px]" v-for="(label, key) in titleMatch" :key="key">
              {{ label }}:
              <span :class="item?.bold ? 'font-[600]' : ''">
                {{ item[key] || "--" }}
                <span v-if="label == '利润'">CNY / {{ item?.original_currency_profit }} {{ item?.expenses?.[0].order_currency || "-" }}</span>
                <!-- {{ label == "利润" ? "CNY" : "" }}  -->
                {{ ["profit_rate", "sales_gross_rate"].includes(key) ? "%" : "" }}</span
              >
            </span>
          </div>
        </template>

        <vxe-table :data="item.expenses" border="inner" ref="tableRef">
          <vxe-column field="order_currency" title="币种" width="80" />
          <vxe-column field="fee" title="金额" width="80" />
          <vxe-column field="assemble" title="费用类型" />
          <vxe-column field="cny_fee" title="人民币金额" width="110" />
          <vxe-column field="stage" title="真实预估" />
          <vxe-column field="segmentation" title="费用说明" />
          <vxe-column field="source" title="费用来源" />
          <vxe-column field="operate_time" title="操作时间" />
        </vxe-table>
        <div class="text-right p-[6px]">
          <div>
            利润 :
            <span class="font-[500] text-[18px]">
              CNY <span class="text-blue text-[22px]">{{ item?.profit }}</span> / {{ item?.expenses?.[0].order_currency || "-" }}
              <span class="text-blue text-[22px]">{{ item.original_currency_profit }}</span>
            </span>
          </div>
          <div>
            利润率
            <span class="font-[500] text-[18px]">
              <span class="text-red text-[22px]">{{ item?.profit_rate }}%</span>
            </span>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="jsx">
import req from "@/views/user/list/add/api/index"
import { ref } from "vue"

const titleMatch = {
  sku: "系统SKU",
  platform_sku: "渠道SKU",
  order_item_id: "OrderItemID",
  settlement_status_desc: "结算状态",
  profit: "利润",
  profit_rate: "利润率",
  sales_gross_rate: "销售毛利率",
}
const tag = ref("v1")
const query = () => {
  initData()
}
const dataList = ref([
  {
    titleInfo: [],
    list: [],
  },
])

const activeNames = ref([0])
const router = useRouter()

const initData = async () => {
  console.log(234)
  const { id } = router.currentRoute.value.query || {}
  const res = await req.skuFee({ id, tag: tag.value })
  // const res = await req.skuFee({ id })
  dataList.value = res.data
  console.log(res.data)
  // dataList.value = res.data.reduce((pre, cur) => {
  //   const titleInfo = []
  //   Object.keys(cur).forEach((k) => {
  //     if (titleMatch[k]) {
  //       titleInfo.push({
  //         label: titleMatch[k],
  //         value: !["profit_rate", "sales_gross_rate"].includes(k) ? cur[k] : cur[k] + "%",
  //         bold: k.indexOf("profit") > -1,
  //       })
  //     }
  //   })
  //   console.log(titleInfo);
  //   pre.push({
  //     titleInfo,
  //     expenses: cur.expenses,
  //   })
  //   return pre
  // }, [])
}

onMounted(() => {
  initData()
})
const tableRef = ref()
const handleChange = (val) => {
  val.forEach((i) => {
    tableRef.value[i].loadColumn(tableRef.value[i].getColumns())
  })
}
</script>

<style lang="scss" scoped>
.product-cost {
  :deep(.el-collapse) {
    border: none;
  }

  :deep(.vxe-table--border-line) {
    border: none;
  }

  :deep(.el-collapse-item) {
    border-radius: 8px;
    border: 1px solid var(--base-border-color);

    overflow: hidden;
    margin-bottom: 16px;
  }

  :deep(.el-collapse-item__wrap) {
    border: none;
  }

  :deep(.el-collapse-item__header.is-active) {
    background-color: var(--base-table-hover-bg-color);
  }

  :deep(.el-collapse-item__header) {
    padding-left: 17px;
    border: none;
    span {
      color: var(--base-text-color);
    }
  }

  :deep(.el-collapse-item__content) {
    padding: 0;
  }
}
:deep(thead .vxe-header--row:nth-child(1) .vxe-header--column) {
  padding: 14px 0;
}
:deep(.vxe-header--column) {
  padding: 4px;
}
</style>
